<template>
  <el-card class="card-body">
    <el-row>
      <el-button type="primary" style="margin-bottom: 12px" @click="handleAdd"
        >添加</el-button
      >
      <el-table
        :data="tableData"
        class="table-body"
        :header-cell-style="{ background: '#F4F6F9', color: '#1D2129' }"
      >
        <el-table-column prop="name" label="名称" width="220"></el-table-column>
        <el-table-column prop="href" show-overflow-tooltip label="地址">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleCheck(scope.row.href)"
            >{{ scope.row.href }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="showFlag" label="是否显示" width="100">
          <template slot-scope="scope">
            {{ scope.row.showFlag ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createDate"
          width="180"
          label="创建时间"
        ></el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row.id)"
              >编辑</el-button
            >
            <el-button type="text" @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :count="Number(count)"
        :current="1"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </el-row>
    <Add ref="add" @getParentTableData="getTableData" />
    <Detail ref="detail" @getParentTableData="getTableData" />
  </el-card>
</template>

<script>
import Add from "./components/Add.vue";
import Detail from "./components/Detail.vue";
import Pagination from "@/components/Pagination.vue";
import {
  deleteQuickApi,
  getQuickListApi,
} from "@/api/modules/websites/quick.api";

export default {
  components: {
    Pagination,
    Detail,
    Add,
    // SearchForm,
    // DataTables,
  },
  data() {
    return {
      tableData: [],
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      count: 0,
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    async getTableData() {
      const res = await getQuickListApi(this.page);
      this.tableData = res.records;
      this.count = res.total;
    },
    handleSizeChange(pageSize) {
      this.page.pageNum = pageSize;
      this.getTableData();
    },
    handleCurrentChange(pageNum) {
      this.page.pageNum = pageNum;
      this.getTableData();
    },
    handleAdd() {
      this.$refs.add.init();
    },
    handleEdit(id) {
      this.$refs.detail.init(id);
    },
    async handleDelete(id) {
      await deleteQuickApi({ id });
      this.$message({
        message: "成功",
        type: "success",
      });
      await this.getTableData();
    },
    handleCheck(url){
      if(url){
        window.open(url)
      }
    }
  },
};
</script>
